<template>
  <view class="home">
		<!-- 加载load -->
    <Loading :loadModal="loadModal" :hint="hint"></Loading>

    <view class="fixed-nav" :style="'top:'+navBar+'px'" v-if="fixedNav">
      <block v-for="(item,index) in tabLabel" :key="index">
        <view class="nav_list" :class="index==TabCur?'nav_active':''" @tap="tabSelect" :data-label="item.label"
          :data-id="index">{{item.label}}</view>
        <scroll-view scroll-y class="scroll_nav">
          <block v-for="(it,idx) in item.second" v-if="index==TabCur" :key="idx">
            <view class="nav_second" :class="idx==item.seat?'second_active':''" @click="labelBtn" 
              :data-type="it.type" :data-index="idx">{{it.label}}</view>
          </block>
        </scroll-view>
      </block>
    </view>
    
    <view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @click="hideModal">
    	<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
    		<view class="cu-list menu text-left">
    			<view class="cu-item arrow" v-for="(item,index) in myList" :key="index" :data-url="item.url" @click="goMy" >
    				<view class="content">
    					<view>{{item.label}}</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </view>
    
    <view class="box" v-bind:style="'top:'+CustomBar+'px'">
      <view class="cu-bar search bg-white">
        <block v-if="!!userInfo.user_cover">
           <view class="cu-avatar round" :style="'background-image:url('+userInfo.user_cover+');'" @click="showModal" data-target="DrawerModalL"></view>
        </block>
        <block v-else>
           <view class="cu-avatar round" :style="'background-image:url('+imgUrl+'static/user.png);'" @click="login"></view>
        </block>
       
        <view class="search-form round">
          <text class="cuIcon-search"></text>
          <input type="text" placeholder="搜索图片、文章、视频" v-model="keyword" confirm-type="search" @confirm="bindconfirm"></input>
        </view>
        <view class="action" @click="isNav">
          <text>{{tabLabel[TabCur].label}}</text>
          <text :class="fixedNav?'cuIcon-triangleupfill':'cuIcon-triangledownfill'"></text>
        </view>
      </view>
    </view>

    <view class="home-main">
      <swiper v-bind:class="DotStyle?'card-swiper square-dot':'card-swiper round-dot'" indicator-dots="true" circular="true"
        autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
        indicator-active-color="#0081ff">
        <swiper-item v-for="(item,index) in swiperList" :key="index" v-bind:class="cardCur==index?'cur':''">
          <view class="swiper-item bg-img shadow-blur" :style="'background-image:url('+imgUrl+item.banner_cover+')'" @tap="toRead"
            data-url="../detail/detail" :data-id="item.article_id">
            <!-- <image :src="item.banner_cover" mode="aspectFill"></image> -->
            <view class='padding-xl text-white'>
              <view class='padding-xs text-cut text-xl'>
                {{item.banner_title}}
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <scroll-view scroll-x class="bg-white nav">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :class="index==TabCur?'text-mauve cur':''" v-for="(item,index) in tabLabel"
            :key="index" @tap="tabSelect" :data-label="item.label" :data-id="index">
            {{item.label}}
          </view>
        </view>
      </scroll-view>
      <view class="news_box">
        <scroll-view scroll-x class="scroll-w">
          <view class="padding">
            <view class="cu-capsule round" v-for="(item,index) in tabLabel[TabCur].second" @click="labelBtn"
              :data-type="item.type" :data-index="index" :key="index">
              <view class="cu-tag" :class="index==tabLabel[TabCur].seat?'bg-gradual-purple': 'bg-grey'">{{item.label}}</view>
              <view class="cu-tag" :class="index==tabLabel[TabCur].seat?'bg-gradual-purple': 'bg-grey'">
                <text v-if="tabLabel[TabCur].label=='最热'" :class=" 'cuIcon-'+item.icon"></text>
                <block v-else-if="tabLabel[TabCur].label=='标签'">
                  {{item.count}}
                </block>
                <block v-else>
                  {{item.type}}
                </block>
              </view>
            </view>
          </view>
        </scroll-view>
        <block v-if="posts.length>0" >
          <view v-for="(item,index) in posts" class="cu-card case" :class="isCard?'no-card':''" @tap="toRead" data-url="../detail/detail" :data-id="item._id" :key="index">
            <view class="cu-item shadow">
              <view class="image">
                <image :src="item.defaultImageUrl" mode="widthFix"></image>
                <view class="cu-tag" :class="colorList.topColor[item.top]" v-if="item.top>0">置顶</view>
								 <view class="cu-tag" :class="colorList.typeColor[item.type]"  v-if="item.type">{{item.type}}</view>
                <view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
              </view>
              <view class="cu-list menu-avatar">
                <view class="cu-item">
                  <view class="cu-avatar round lg" v-if="item.author_cove" :style="'background-image:url('+item.author_cover+');'"></view>
                  <view :class="!item.author_cove?'margin-lr':'content'" class="flex-sub">
                    <view class="text-grey" :class="!item.author_cove?'item-name text-lg':''">{{item.author}}</view>
                    <view class="text-gray text-sm flex justify-between">{{item.createTime}}
                      <view class="text-gray text-sm">
                        <text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.totalVisits}}
                        <text class="cuIcon-messagefill margin-lr-xs"></text> {{item.totalComments}}
												<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.totalZans}}
												<text class="cuIcon-favorfill margin-lr-xs"></text> {{item.totalCollection}}
                      </view>
                    </view>
                  </view>
                </view>						
              </view>
							
            </view>
          </view>
        </block>
				<Nodata :noModal="nodata"></Nodata>
      </view>
    </view>
  </view>
</template>

<script>
	import Loading from '../../components/loading.vue';
	import Nodata from '../../components/nodata.vue';
	import api from '../../utils/api.js';
  import util from '../../utils/time.js';
	
  export default {
		components: {Loading,Nodata},
    data() {
      return {
        CustomBar: getApp().globalData.CustomBar,
        imgUrl:getApp().globalData.imgUrl,
        navBar: parseInt(getApp().globalData.CustomBar) + 50,
        // userInfo:{},
        modalName: null,
        loadModal: false, //加载
				hint: '加载中...', //加载提示
				nodata: false,
        // pageInex:1,//第一页
        fixedNav: false,
        TabCur: 0,
        scrollLeft: 0,
				colorList:{
					topColor:{
							0:'bg-gradual-blue ',
							1:'bg-gradual-green',
							2:'bg-gradual-orange',
							3:'bg-gradual-red',
					},
					typeColor:{
						'原创':'bg-mauve',
						'转载':'bg-pink',
					}
				},
        keyword: null,
				type: 'all',
        tabLabel: [{
          label: '最新',
          seat: 0,
          second: [{
            label: '全部',
            type: 'all'
          }, {
            label: '一天内',
            type: 'day'
          }, {
            label: '一周内',
            type: 'hebdomad'
          }, {
            label: '一月内',
            type: 'month'
          }, {
            label: '一年内',
            type: 'year'
          }]
        }, {
          label: '最热',
          seat: 0,
          second: [{
              label: '浏览最多',
              type: 'liulan',
              icon: 'attentionfill'
            },
            {
              label: '评论最多',
              type: 'hot',
              icon: 'markfill'
            },
            {
              label: '点赞最多',
              type: 'fire',
              icon: 'appreciatefill'
            },
            {
              label: '收藏最多',
              type: 'most',
              icon: 'favorfill'
            }
          ]
        }, {
          label: '标签',
          seat: 0,
          second: []
        }],
        ColorList: this.ColorList,
        swiperList: [],
        posts: [],
        myList:[
          {label:'我的喜欢',url:'../temp/collection?type=2'},
          {label:'我的收藏',url:'../temp/collection?type=1'},
          {label:'我的评论',url:'../temp/comment'},
          {label:'我的消息',url:'../temp/flash'}
        ]
      }
    },
    props: ['pageInex','userInfo'],
    created:async function() {
      await this.banner();
      await this.getHomeLabel();
      this.getHomePostsList('up',1);
    },
    methods: {
      showModal(e) {
      	this.modalName = e.currentTarget.dataset.target
      },
      hideModal(e) {
      	this.modalName = null
      },
      goMy(e){
        let {url} = e.currentTarget.dataset;
        uni.navigateTo({
          url: `${url}`
        })
      },
      banner:async function(){ // 轮播图接口
				let result=await api.getBanner();
				if(result.errMsg=="cloud.callFunction:ok"){
					this.swiperList = result.result.data;
				}
      },
      getHomeLabel:async function(){ //分类
				let res = await api.getHomeLabel();
				this.tabLabel[2].second = res.result;
      },
      getHomePostsList:async function(refresh = '', pageInex = 1) { //新闻列表
        this.hint = refresh == 'below' ? '刷新中...' : '加载中...';
        this.loadModal = true;
        const _this = this;
				let page = !!refresh ? pageInex : this.pageInex;
				if (refresh == 'below'||page==1) {
				  this.posts = [];
				} //清空文章列表
				let result = await api.getHomePostsList(page, this.keyword, 1, 'createTime', this.type);
				console.info(result);
				this.loadModal = false;
				 uni.stopPullDownRefresh();
				 this.posts = page == 1 ? result.data : [...this.posts, ...result.data];
				 this.nodata = (result.data.length === 0 && page == 1)||this.posts.length === 0? true : false;
				 if (result.data.length == 0) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
				 }
      },
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
        let seat = this.tabLabel[this.TabCur].seat;
        let data = this.tabLabel[this.TabCur].second[seat];
        this.$emit('homePageInex', '1');
        this.type = !!data.type ? data.type : 'all';
        this.getHomePostsList('up',1);
      },
			labelBtn(e) {
			  let {type,index} = e.currentTarget.dataset;
			  this.fixedNav = false;
				this.tabLabel[this.TabCur].seat = index;
				this.$emit('homePageInex', '1');
				this.type = !!type ? type : 'all';
			  this.getHomePostsList('up',1);		  
			},
      bindconfirm: function(e) { // 点击键盘上的搜索
        this.keyword = e.detail.value;
				this.$emit('homePageInex', '1');
        this.getHomePostsList('up',1);
        console.log(e.detail.value);
      },
      login() {
        uni.navigateTo({
          url: '../login/login'
        })
      },
      toRead(e) {
        let {id,url} = e.currentTarget.dataset;
        uni.navigateTo({url: `${url}?id=${id}`})
      },
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      isNav() {
        this.fixedNav = !this.fixedNav;
      }
    }
  }
</script>

<style>
  .tower-swiper .tower-item {
    transform: scale(calc(0.5 + var(--index) / 10));
    margin-left: calc(var(--left) * 100rpx - 150rpx);
    z-index: var(--index);
  }

  .box {
    position: fixed;
    top: 176rpx;
    left: 0;
    right: 0;
    z-index: 99;
  }

  .home-main {
    padding: 100rpx 0;
  }

  .scroll-w {
    width: 100%;
    white-space: nowrap;
  }

  .fixed-nav {
    position: fixed;
    top: 176rpx;
    right: 10rpx;
    z-index: 999;
    background-color: #2d2d2d;
    border-radius: 20rpx;
    width: 200rpx;
    opacity: 0.9;
  }

  .nav_list {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    margin: 0 20rpx;
    border-bottom: 1rpx solid #fff;
  }

  .nav_second {
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    background: #ea7259;
    margin: 20rpx 20rpx;
    border-radius: 20rpx;
  }

  .nav_active {
    color: #ff9800;
    border-bottom: 1rpx solid #ff9800;
  }

  .second_active {
    background-color: #ff9800;
  }

  .nav_list:last-child {
    border-bottom: 0 none;
  }

  .scroll_nav {
    max-height: 400rpx;
  }
	
	.cu-card.case .image {
		max-height: 200px;
	}

</style>
